<template>
	<div class="system-systemUserdmin-dialog-container">
		<el-dialog :close-on-click-modal="false" :title="state.dialog.title" v-model="state.dialog.isShowDialog"
			width="600px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" ref="datainterfaceDialogFormRef" :rules="rules" size="default"
					label-width="100px">
					<el-row :gutter="35">


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="操作地址" prop="address">
								<el-input v-model="state.ruleForm.address" :disabled.sync="true"
									placeholder="操作地址"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="操作方式" prop="type">
								<el-select v-model="state.ruleForm.type" placeholder="操作方式" clearable style="width: 100%">
									<el-option value="1" label="充值"></el-option>
									<el-option value="2" label="提现"></el-option>
								</el-select>
							</el-form-item>
						</el-col>


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="操作数量" prop="amount">
								<el-input v-model="state.ruleForm.amount" placeholder="操作数量"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="描述" prop="remark">
								<el-input v-model="state.ruleForm.remark" placeholder="操作描述"></el-input>
							</el-form-item>
						</el-col>


						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="记录显示" prop="showType">
								<el-select v-model="state.ruleForm.showType" placeholder="显示隐藏" clearable
									style="width: 100%">
									<el-option value="SHOW" label="显示"></el-option>
									<el-option value="HIDE" label="隐藏"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="谷歌验证码" prop="code">
								<el-input v-model="state.ruleForm.code" placeholder="谷歌验证码"></el-input>
							</el-form-item>
						</el-col>


					</el-row>
				</el-form>


			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';


// 导入接口


import { useFundApi } from '/@/api/fund/index'



const datainterfaceDialogFormRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);


const rules = {
	code: [{
		required: true,
		message: "不能为空，请输入！",
		trigger: "blur"
	}],
	amount: [{
		required: true,
		message: "不能为空，请输入！",
		trigger: "blur"
	}],

	type: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	],
	showType: [
		{
			required: true,
			message: "不能为空，请重新选择！",
			trigger: "blur"
		}
	]
}


const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	row: {} as any,
	ruleForm: {
		type: "",
		amount: "",
		remark: "",
		code: "",
		address: "",
		showType: ""
	} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});




// 打开弹窗
const openDialog = async (type: string, row?: any) => {

	state.row = Object.assign({}, {}, row);


	if (type === 'edit') {

		state.ruleForm = {
			type: "",
			amount: "",
			remark: "",
			code: "",
			address: row.address,
			showType: 'HIDE'
		}

		state.dialog.title = `充值或提现【${row.coinSymbol}】`;
		state.dialog.submitTxt = '确 定';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {



	// 检查顶层表单
	datainterfaceDialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表

			try {
				if (state.dialog.type == 'edit') {

					let amount = Math.abs(state.ruleForm.amount);
					// if (state.ruleForm.type == 2) {
					// 	amount = -1 * amount;
					// }

					let obj = {
						userId: state.row.address,
						coinId: state.row.coinId,
						amount: amount,
						remark: state.ruleForm.remark,
						showType: state.ruleForm.showType
					}
					if (state.ruleForm.type == 2) {
						await useFundApi().adminWithdraw(obj, state.ruleForm.code);
					} else {
						await useFundApi().adminRecharge(obj, state.ruleForm.code);
					}

				}
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error(error.msg);
			}




		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})



};





watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {

		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-systemUserdmin-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}


	.alig_container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>div {
			margin: 15px 0px;
			display: flex;
			justify-content: center;
		}
	}
}
</style>